<template>
  <div class="app-container-item">
    <div class="form-main">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px" class="form-flex">
        <el-row :gutter="20">
          <el-col :span="8" :xs="24">
            <el-form-item label="所属小区" prop="communityName">
              <el-input v-model="form.communityName"  disabled/>
            </el-form-item>
          </el-col>
          <!--<el-col :span="8" :xs="24">-->
            <!--<el-form-item label="楼编号" prop="floorNum">-->
              <!--<el-input v-model="form.floorNum" @input="floorChange" placeholder="请输入楼编号" />-->
            <!--</el-form-item>-->
          <!--</el-col>-->
          <el-col :span="8" :xs="24">
            <el-form-item label="楼名称" prop="floorName">
              <el-input v-model="form.floorName" placeholder="请输入楼名称" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="期数" prop="term">
              <el-input v-model="form.term" placeholder="请输入期数" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="楼面积" prop="floorArea">
              <el-input v-model="form.floorArea" placeholder="请输入楼面积" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="是否有电梯" prop="lift">
              <el-select v-model="form.lift" placeholder="请选择是否有电梯">
                <el-option
                  v-for="dict in dict.sys_yes_no"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="收据抬头" prop="receiptTitle">
              <el-input v-model="form.receiptTitle" placeholder="收据抬头" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="管家姓名" prop="butlerUserName">
              <el-input v-model="form.butlerUserName" readonly placeholder="请选择管家" >
                <el-button slot="append" icon="el-icon-search" @click="()=>this.$refs.userRefs.show()"></el-button>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="管家电话" prop="butlerPhoneNum">
              <el-input v-model="form.butlerPhoneNum" placeholder="请输入管家电话" />
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="房间数量" prop="roomCountNum">
              <el-input v-model="form.roomCountNum"  disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="入住数量" prop="roomYrzNum">
              <el-input v-model="form.roomYrzNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="未入住数量" prop="roomWrzNum">
              <el-input v-model="form.roomWrzNum" disabled/>
            </el-form-item>
          </el-col>
          <el-col :span="8" :xs="24">
            <el-form-item label="管理区" prop="precinct">
            <el-select v-model="form.precinct" placeholder="请选择管理区">
              <el-option
                v-for="dict in dict.precinct"
                :key="dict.dictValue"
                :label="dict.dictLabel"
                :value="dict.dictValue"
              ></el-option>
            </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" :xs="24">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="dialog-footer" style="text-align: center;">
      <el-button type="primary" plain @click="submitForm"  v-hasPermi="['property:floor:edit']">保 存</el-button>
    </div>
    <select-user ref="userRefs" @ok="selectUserOk" />
  </div>
</template>

<script>
  import { getFloor, delFloor, updateFloor } from "@/api/property/floor";
  import { censusRoomInfo } from "@/api/property/room";
  import { listCommunity} from "@/api/property/community";
  import SelectUser from "@/views/components/magnifier/selectUser"
  export default {
    name: "FloorForm",
    dicts:[ 'sys_yes_no','precinct' ],
    components:{ SelectUser },
    data() {
      return {
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          communityId: null,
          floorNum: null,
          floorName: null,
          term: null,
          unitNum: null,
          layerNum: null,
          roomNum: null,
          floorArea: null,
          lift: null,
          statusCd: null,
          nodeId:null,
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
          floorNum:[
            { required: true, message: "楼编号不能为空", trigger: "blur" },
            {
              pattern: /^([1-9]\d*.?|0.)\d*$/,
              message: "请输入整数",
              trigger: "blur"
            }
          ],
          unitNum:[
            { required: true, message: "单元数不能为空", trigger: "blur" },
            {
              pattern: /^([1-9]\d*.?|0.)\d*$/,
              message: "请输入整数",
              trigger: "blur"
            }
          ],
          layerNum:[
            { required: true, message: "层数不能为空", trigger: "blur" },
            {
              pattern: /^([1-9]\d*.?|0.)\d*$/,
              message: "请输入整数",
              trigger: "blur"
            }
          ],
          roomNum:[
            { required: true, message: "房间数不能为空", trigger: "blur" },
            {
              pattern: /^([1-9]\d*.?|0.)\d*$/,
              message: "请输入整数",
              trigger: "blur"
            }
          ],
        }
      };
    },
    watch: {
      currentNode(v) {
        this.initForm()
      }
    },
    created() {
      this.initForm()
    },
    methods: {
      initForm() {
        this.reset();
        if (this.currentNode.modelType == 'floor') {
          getFloor(this.currentNode.id).then(response => {
            this.form = Object.assign(response.data,{roomCountNum:0,roomWrzNum:0,roomYrzNum:0})
            censusRoomInfo({floorId: this.currentNode.id}).then(res=>{
              this.form.roomCountNum = res.data.roomCountNum
              this.form.roomWrzNum = res.data.roomWrzNum
              this.form.roomYrzNum = res.data.roomYrzNum
            })
          });
        }
      },
      // 取消按钮
      cancel() {
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          communityId: null,
          deptId: null,
          floorNum: null,
          floorName: null,
          term: null,
          unitNum: null,
          layerNum: null,
          roomNum: null,
          floorArea: null,
          lift: null,
          ancestors: null,
          latitude: null,
          longitude: null,
          position: null,
          dataSourceId: null,
          statusCd: null,
          remark: null,
          butlerUserId:null,
          butlerUserName:null,
          butlerPhoneNum:null,
          receiptTitle:null,
          precinct:null
        };
        this.resetForm("form");
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            updateFloor(this.form).then(response => {
              this.msgSuccess("修改楼栋资料成功");
              this.open = false;
              this.getList();
            });
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$confirm('是否确认删除楼栋信息编号为"' + ids + '"的数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delFloor(ids);
        }).then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        }).catch(() => {});
      },
      floorChange(v){
        this.form.floorName = `${v}栋`
      },
      selectUserOk(selection){
        if(selection.length > 0){
          this.form.butlerUserName = selection[0].nickName
          this.form.butlerUserId = selection[0].userId
          this.form.butlerPhoneNum = selection[0].phonenumber
        }else{
          this.form.butlerUserName = null
          this.form.butlerUserId = null
          this.form.butlerPhoneNum = null
        }
      }
    },
    props: {
      currentNode: {
        type: Object,
        default:()=>{}
      },
    }
  };
</script>
